<template>
  <div class="mydata-container">
    <van-nav-bar title="我的资料" @click-left="$router.back()">
      <template #left>
        <van-icon name="down" />
      </template>
    </van-nav-bar>
    <van-cell-group inset class="mayimg">
      <van-cell title="头像" is-link to="/uploaderImg">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #default>
          <van-image
            class="myimg"
            fit="cover"
            round
            :src="'http://localhost:1337' + userInfo.avatar"
          />
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group inset>
      <van-cell
        title="昵称"
        :value="userInfo.nickname"
        is-link
        @click="$router.push('/editName')"
      />
      <van-cell
        title="性别"
        :value="value"
        is-link
        @click="showPicker = true"
      />
      <van-cell
        title="地区"
        :value="valueArae"
        is-link
        @click="showPopup = true"
      />
      <van-cell
        title="个人简介"
        :value="userInfo.intro"
        is-link
        @click="$router.push('/editBriefing')"
      />
    </van-cell-group>
    <van-button type="primary" block @click="exitRegister">退出登录</van-button>
    <!-- 性别弹出框显示与隐藏 -->
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
        :default-index="defaultindex"
      />
    </van-popup>
    <!-- 地区弹出框显示与隐藏 -->
    <van-popup v-model="showPopup" position="bottom">
      <van-area
        :area-list="areaList"
        :value="areaArea"
        :columns-num="2"
        @confirm="editArea"
        @cancel="showPopup = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { editUserInfoApi } from "./mine";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  name: "mydata",
  data() {
    return {
      showPicker: false, //性别弹出框显示与隐藏
      columns: ["未知", "男", "女"], //性别:0(未知) 1(男) 2(女)
      value: "", //性别框值
      defaultindex: "", //性别框默认值
      showPopup: false, //地区弹出框显示与隐藏
      areaList: areaList, //弹出框的省市数据
      areaArea: "", //当前选中的地区
      valueArae: "", //地区框值
      //
    };
  },

  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    ...mapMutations(["SET_USERINFO"]),
    // 1 性别确认按钮
    async onConfirm(value) {
      this.value = value;
      this.showPicker = false;
      const num = this.columns.indexOf(value);
      await editUserInfoApi({ gender: num });
      this.$toast.success("更新成功");
    },
    // 计算性别
    editGender() {
      if (this.userInfo.gender == 0) {
        this.value = "未知";
        this.defaultindex = 0;
      } else if (this.userInfo.gender == 1) {
        this.value = "男";
        this.defaultindex = 1;
      } else if (this.userInfo.gender == 2) {
        this.value = "女";
        this.defaultindex = 2;
      }
    },
    //2 地区确认按钮
    async editArea(value) {
      let code = value[1].code;
      this.areaArea = code;
      await editUserInfoApi({ area: code });
      this.valueArae = this.areaList.city_list[code];
      this.showPopup = false;
      this.$toast.success("更新成功");
    },
    //遍历城市
    forArea() {
      let num = this.userInfo.area;
      this.valueArae = this.areaList.city_list[num];
      this.areaArea = this.userInfo.area;
    },
    //3.退出登录
    ...mapActions(["logout"]),
    exitRegister() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确认退出登录吗？",
        })
        .then(() => {
          //点击确认退出登录.移出token
          this.logout();
          this.$router.push("/login");
        });
    },
  },
  created() {
    this.editGender();
    this.forArea();
  },
};
</script>
<style lang="less" scoped>
.mydata-container {
  box-sizing: border-box;
  background-color: #f7f4f5;
  height: 1300px;
  // 我的资料-标题
  .van-nav-bar__title.van-ellipsis {
    font-weight: 700;
  }
  .van-icon-down {
    transform: rotate(90deg);
    color: #222222;
    font-size: 40px;
    font-weight: 300;
  }
  // 我的头像
  .mayimg {
    display: flex;
    align-items: center;
    height: 120px;
    margin-top: 20px;
    .van-cell__title {
      span {
        font-size: 30px;
      }
    }
    .van-cell.van-cell--clickable {
      display: flex;
      align-items: center;
    }
    .myimg {
      width: 80px;
      height: 80px;
    }
  }
  .van-cell-group.van-cell-group--inset.van-hairline--top-bottom {
    margin-top: 20px;
  }
  .van-cell.van-cell--clickable {
    display: flex;
    align-items: center;
  }
  button.van-button.van-button--primary.van-button--normal.van-button--block {
    width: 690px;
    height: 100px;
    color: #e40137;
    font-size: 32px;
    background-color: #fff;
    margin: 20px 30px 20px 30px;
    border: none;
  }
}
</style>